<template>
  <e-sliderbox 
    :value="value" 
    :list="list"
    type="week"
    @change="handleChange">
    <template slot-scope="scope">
      <div>
        <p class="cell-date">{{scope.scheduleDate && new Date(scope.scheduleDate).format('MM-dd')}}</p>
        <h4 class="week-item">{{scope.scheduleWeek}}</h4>
        <small>{{scope.matchNumber}}场比赛</small>
      </div>
    </template>
  </e-sliderbox>
</template>

<script>
import ESliderbox from '@e-ui/Sliderbox'
// console.log('Slider', Slider)
export default {
  components: {
    ESliderbox
  },
  props: {
    list: {
      type: Array
    },
    value: {}
  },
  methods: {
    handleChange (value) {
      this.$emit('input', value).$emit('change', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.sliderbox-item{
  font-size: 16px;
  padding: 16px 0;
  h4{
    font-weight: 700;
    margin: 12px 0 ;
  }
}
.cell-date{
  margin-top:12px;
}

</style>
